<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>产品列表</title>
    <!--top信息-->
    <link rel="icon" href="static/images/favicon.ico" type="image/ico">
    <div th:replace="public/pc :: top"></div>
</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="public/pc :: navigation"></div>
        <!--End 左侧导航-->

        <!--头部信息-->
        <div th:replace="public/pc :: head"></div>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-body">
                                <form class="form-inline" action="" method="post"
                                      onsubmit="return false;">
                                    <div class="form-group">
                                        产品id：
                                        <input class="form-control" type="text" id="userId" style="width: 110px"
                                               name="example-if-password" placeholder="请输入产品id">
                                        类别：
                                        <select name="type" class="form-control" id="category">
                                            <!--数据在后台获取-->
                                        </select>
                                        产品编码：
                                        <input class="form-control" type="text" id="type" style="width: 110px"
                                               name="example-if-password" placeholder="输入产品编码">
                                        产品名称：
                                        <input class="form-control" type="text" id="remark"
                                               name="example-if-password" placeholder="请输入产品名称">
                                    </div>
                                    <div class="form-group">
                                        <button class="btn btn-success" type="submit" id="flushed">查询</button>
                                        <a class="btn btn-primary m-r-5 example-p-3" href="/addProductInfo"
                                           id="addProduct"><i
                                                class="mdi mdi-plus"></i> 新增</a>
                                    </div>
                                </form>
                            </div>
                            <div class="card-body">
                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>编号</th>
                                            <th>产品类别</th>
                                            <th>产品编码</th>
                                            <th>产品名称</th>
                                            <th>进货价</th>
                                            <th>销售价</th>
                                            <th>单位</th>
                                            <th>库存</th>
                                            <th>保质期</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="categoryInfoBody">
                                        <!--                                        此处展示相关数据-->
                                        </tbody>
                                    </table>
                                </div>
                                <ul class="pagination" id="paginatedInfo">
                                    <!--                                    展示分页导航-->
                                </ul>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="static/js/jquery.min.js"></script>
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="static/js/main.min.js"></script>
<!--对话框-->
<script type="text/javascript" src="static/js/jconfirm/jquery-confirm.min.js"></script>
<!--消息提示-->
<script type="text/javascript" src="static/js/bootstrap-notify.min.js"></script>
<script type="text/javascript" src="static/js/lightyear.js"></script>
<!--上传文件-->
<script type="text/javascript" src="static/js/jquery.ajaxfileupload.js"></script>
<!--文件上传教程-->
<!--https://blog.csdn.net/joycesunny/article/details/84844677#:~:text=jquery%E7%9A%84ajax%E6%8F%90%E4%BA%A4%E6%96%87%E4%BB%B6%E4%B8%8A%E4%BC%A0%201%20%3Cform%20id%3D%22infoLogoForm%22%20enctype%3D%27multipart%2Fform-data%27%3E%202%20%3Cdiv%20class%3D%22cnt-updateWrapper%22,draggable%3D%22false%22%3E%206%20%3Cdiv%20id%3D%22licenseBox%22%20class%3D%22ctn-licence%22%3E%207%20%E7%82%B9%E5%87%BB%E6%88%91%E4%B8%8A%E4%BC%A0%E5%9B%BE%E7%89%87%20%E6%9B%B4%E5%A4%9A%E9%A1%B9%E7%9B%AE-->


<script type="text/javascript">
    // 获取所有的分类信息并保存分类信息
    let CategoryInfoList;
    $(function () {
        let ghtml = "";
        ghtml += "<option value='null'>请选择分类</option>";
        $.ajax({
            url: '/categoryInfo/getAllCategoryInfo',
            method: 'post',
            data: {},
            dataType: "json",
            success: function (data) {
                // console.log(data);
                CategoryInfoList = data.data;
                if (null != data.data) {
                    // 填充数据
                    $.each(data.data, function (i, item) {
                        // console.log(item);
                        // 添加数据信息
                        ghtml += "<option value='" + item.categoryId + "'>" + item.categoryName + "</option>";
                    })
                    $("#category").html(ghtml); // 添加数据
                }
            }
        })
    });

    // 全局变量
    let pageNum = 1, pageSize = 10;

    // 获取参数并查询
    function getProduct() {
        getProductInfo();
    }

    // 共用的查询 function
    function getProductInfo() {
        let ghtml = "";
        $.ajax({
            type: "post",
            url: "/productInfo/getProductInfo",
            data: {pageNum: pageNum, pageSize: pageSize},
            dataType: "json",
            success: function (data) {
                // console.log(data);
                if (null != data.data) {
                    // 填充数据
                    $.each(data.data.result, function (i, item) {
                        // alert(item)
                        ghtml += '<tr>';
                        // 添加数据信息
                        ghtml += '<td>' + item.id + '</td>';
                        // 获取分类信息
                        if (CategoryInfoList.length <= 0) {
                            ghtml += '<td> <font class="text-error"> 未查询到分类 </font></td>';
                        } else {
                            let isExist = false;
                            $.each(CategoryInfoList, function (i, item1) {
                                if (item1.categoryId === item.categoryId) {
                                    isExist = true;
                                    ghtml += '<td>' + item1.categoryName + '</td>';
                                }
                            })
                            if (!isExist) {
                                ghtml += '<td> <font class="text-error"> 分类不存在 </font></td>';
                            }
                        }
                        ghtml += '<td>' + item.productEncode + '</td>';
                        ghtml += '<td>' + item.productName + '</td>';
                        ghtml += '<td>' + item.purchasePrice + '</td>';
                        ghtml += '<td>' + item.salesPrice + '</td>';
                        ghtml += '<td>' + item.unit + '</td>';
                        ghtml += '<td>' + item.inventory + '</td>';
                        ghtml += '<td>' + item.shelfLife + '</td>';
                        if (item.status === 0) {
                            ghtml += '<td> <font class="text-success"> 正常 </font></td>';
                        } else {
                            ghtml += '<td> <font class="text-error"> 停用 </font></td>';
                        }
                        ghtml += '<td><div class="btn-group">' +
                            '<a class ="btn btn-cyan" title="编辑" data-toggle="tooltip" onclick="editProductInfo(' + item.id + ')"><i class ="mdi mdi-pencil">编辑</i></a>';
                        // '<a class ="btn btn-xs btn-default" title="查看" data-toggle="tooltip"><i class ="mdi mdi-eye"></i></a>' +
                        if (item.status === 0) {
                            ghtml += '<a class ="btn btn-danger" title="停用" data-toggle="tooltip" onclick="stopProduct(' + item.id + ')"><i class ="mdi mdi-window-close">停用</i></a>';
                        } else {
                            ghtml += '<a class ="btn btn-success" title="启用" data-toggle="tooltip" onclick="enableProduct(' + item.id + ')"><i class ="mdi mdi-check">启用</i></a>';
                        }
                        ghtml += '</div></td>';
                        ghtml += '</tr>';
                    })
                    $("#categoryInfoBody").html(ghtml); // 添加数据
                    // 保存分页信息
                    pageNum = data.data.pageNum;
                    pageSize = data.data.pageSize;
                    // 调用分页方法
                    paginated(pageNum, data.data.pages, pageSize, data.data.total);
                }
            },
            error: function (data) {
                lightyear.loading('hide');
                console.log(data);
                lightyear.notify("服务器错误，请联系管理员！", 'danger', 100);
            }
        })
    }

    // 编辑产品信息
    function editProductInfo(id) {
        // 跳转到编辑页面
        window.location.href = "/editProductInfo?id=" + id;
    }

    // 查询分页页面
    function getProductInfoByPaginated(num, size) {
        // 保存分页信息
        pageNum = num;
        pageSize = size;
        getProduct();
    }

    // 分页导航
    function paginated(pageNum, pages, pageSize, total) {
        // 计算需要显示的页面
        let begin = 1 >= (pageNum - 4) ? 1 : (pageNum - 4);
        let end;
        if (pageNum < 4) {
            end = pages < 8 ? pages : 8;
        } else {
            end = pages < (pageNum + 4) ? pages : (pageNum + 4);
        }

        let ghtml = '';
        if (pageNum === 1) {
            ghtml += '<li class="disabled"><span>«</span></li>'
        } else {
            ghtml += '<li><a href="#1" onclick="getProductInfoByPaginated(' + 1 + ',' + pageSize + ')"> » </a></li>'
        }
        for (let i = begin; i < end; i++) {
            if (pageNum === i) {
                ghtml += '<li class="active"><span>' + i + '</span></li>'
            } else {
                ghtml += '<li><a href="#1" onclick="getProductInfoByPaginated(' + i + ',' + pageSize + ')">' + i + '</a></li>'
            }
        }
        if (pages > pageNum + 8) {
            ghtml += '<li class="disabled"><span>...</span></li>'
        }
        if (pageNum === pages) {
            ghtml += '<li class="active"><span>' + pages + '</span></li>'
        } else {
            ghtml += '<li><a href="#1" onclick="getProductInfoByPaginated(' + pages + ',' + pageSize + ')"> ' + pages + ' </a></li>'
        }

        if (pageNum === pages) {
            ghtml += '<li class="disabled"><span>»</span></li>'
        } else {
            ghtml += '<li><a href="#1" onclick="getProductInfoByPaginated(' + pages + ',' + pageSize + ')"> » </a></li>'
        }
        ghtml += '<span>共 ' + total + ' 条数据</span'
        $("#paginatedInfo").html(ghtml); // 添加数据
    }

    // 点击刷新
    $("#flushed").click(function () {
        getProduct();
    })

</script>
</body>
</html>